import React, { Component } from 'react';
import Header from '../../components/MyHeader/header'
import { Image, List } from 'antd-mobile'
import { BankcardOutline,TruckOutline,FillinOutline,HandPayCircleOutline } from 'antd-mobile-icons'
import '../../styles/personal.scss'

const demoSrc ='https://img2.baidu.com/it/u=1527638636,152745451&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500'
class personal extends Component {

    render() {
        function handleClick() {
            // ...
          }
        return (
            <div className='personal'>
                <div className="headers">
                    <div className='box'>
                        <Header back={null} />
                        <div className='use'>
                            <Image src={demoSrc} width={68} height={68} fit='cover' style={{ borderRadius: 34 }} />
                            <span>
                                {/* {this.props.data.name} */
                                
                                }
                            </span>
                        </div>
                    </div>
                </div>
                <div className='title'>
                    <div>
                        <p>1</p>
                        <p>收藏</p>
                    </div>
                    <div>
                        <p>0</p>
                        <p>积分</p>
                    </div>
                    <div>
                        <p>0</p>
                        <p>优惠券</p>
                    </div>
                </div>
                <div className='order'>
                    <div className='order_title'>
                        <h3>我的订单</h3>
                        <p>查看全部订单 <span>{'>'}</span></p>
                    </div>
                    <div className='order_list'>
                        <div>
                            <HandPayCircleOutline style={{fontSize:34}} />
                            <p>待付款</p>
                        </div>
                        <div>
                            <BankcardOutline style={{fontSize:34}} />
                            <p>待发货</p>
                        </div>
                        <div>
                            <TruckOutline style={{fontSize:34}}/>
                            <p>已发货</p>
                        </div>
                        <div>
                            <FillinOutline style={{fontSize:34}}/>
                            <p>待评价</p>
                        </div>
                    </div>
                </div>
                <List mode='card' >
                    <List.Item  onClick={handleClick}>会员中心</List.Item>
                </List>
                <div className='list'>
                <List mode='card' >
                    <List.Item  onClick={handleClick}>领券中心</List.Item>
                    <List.Item  onClick={handleClick}>我的评价</List.Item>
                    <List.Item  onClick={handleClick}>收货地址</List.Item>
                    <List.Item  onClick={handleClick}>我的客服</List.Item>
                    <List.Item  onClick={handleClick}>通用设置</List.Item>
                    <List.Item  onClick={handleClick}>我的优购券</List.Item>
                </List>
                </div>
                <div className='foot'></div>
            </div>
        );
    }
}

export default personal;